<template>
	<view>
		<!--#ifdef APP-PLUS-->
		<view class="lz-status_bar">
			<view class="lz-top_view"></view>
		</view>
		<!--#endif-->
		<!-- <view class="kaoshi-head">
			<view class="kaoshi-head-top">
				<view class="kaoshi-head-left" @tap="navigateBack">
					<view class="iconfont icon-zuojiantou"></view>
				</view>
				<view class="kaoshi-head-m">练习报告</view>
			</view>
		</view> -->
		<view class="kaoshi-bg"
			style="background-image: url('')">
			<view class="kaoshi-question-over" style="margin-top: 100px;">
				<!-- <view class="endtime">交卷时间：{{ pages_params.end_time }}</view> -->
				<view class="text-xxl flex justify-center align-center text-bold">{{ res }}!</view>
				<view class="kaoshi-baogao">
					<circle-progress-bar :animate="false" :border_width="5" border_color="#3c7bfc" :size="125"
						border_back_color="#f3f3f3" :pro="pages_params.zhengquelv / 100">
						<!-- content -->
						<view class="kaoshi-baogao-title">
							<view class="kaoshi-baogao-title-l">{{ score }}</view>
						</view>
						<view class="kaoshi-baogao-text">得分</view>
					</circle-progress-bar>
					<!-- <view class="kaoshi-baogao-text" style="margin-top: 15px;">答对题数/已做题数</view> -->
				</view>
				<view style="gap: 20px; width: 100%;" class="flex justify-center aalign-center">
					<button class="bg-green" @tap="tapBack">返回首页</button>
					<button class="bg-blue" @tap="agine">再来一局</button>
				</view>
				<!-- <view class="kaoshi-question-over-content">
					<view class="kaoshi-question-over-content-flex">
						<view>练习时间</view>
						<view class="kaoshi-question-over-content-text">{{ use_time }}</view>
					</view>
					<view class="flexline"></view>
					<view class="kaoshi-question-over-content-flex">
						<view>答对题数</view>
						<view class="kaoshi-question-over-content-text">{{ pages_params.right_num }}</view>
					</view>
					<view class="flexline"></view>
					<view class="kaoshi-question-over-content-flex">
						<view>本次答题数</view>
						<view class="kaoshi-question-over-content-text">{{ pages_params.total_num }}</view>
					</view>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
import circleProgressBar from '@/components/circle-progress-bar/circle-progress-bar.vue'
export default {
	data() {
		return {
			pages_params: {},
			score: 0,
			res: '',
			rival: {}
		}
	},
	computed: {
		use_time() {
			let start = this.pages_params.start_time || 0
			let end = (new Date(this.pages_params.end_time)).getTime()
			let sec = parseInt((end - start) / 1000);
			let hour = parseInt(sec / 3600);
			let miu = parseInt((sec - hour * 3600) / 60);
			let s = sec - hour * 3600 - miu * 60;
			// formatDigit
			hour = this.$myUtils.$common.formatDigit(hour)
			miu = this.$myUtils.$common.formatDigit(miu)
			s = this.$myUtils.$common.formatDigit(s)
			return `${hour}:${miu}:${s}`
		}
	},
	components: {
		circleProgressBar
	},
	onLoad(opts) {
		console.log('%c [ opts ]-78', 'font-size:13px; background:pink; color:#bf2c9f;', opts)
		this.score = opts.score
		this.res = opts.res
		this.rival = opts.rival
		this.pages_params = opts;
		this.pages_params.zhengquelv = parseInt(this.pages_params.zhengquelv).toFixed(0)
	},
	methods: {
		tapBack() {
			//返回首页
			uni.reLaunch({ url: '/pages/index/index' })
		},
		agine() {
			let type = uni.getStorageSync('type');
			console.log('%c [ type ]-101', 'font-size:13px; background:pink; color:#bf2c9f;', type)
			if (type == 0) {
				uni.navigateTo({
					url: '/subpackage/randomAnswer/randomAnswer'
				})
			} else {
				uni.navigateTo({
					url: '/pages/pkAnswer/pkAnswer'
				})
			}
		},
		navigateBack() {
			uni.navigateBack(2);
		},
		goto_detail(type) {
			if (type === 2) {
				this.$openrul('/src/pages/mine/learn/wrongQuestion/list?unit_id=' + this.pages_params.unit_id);
			} else {
				this.$openrul('/src/pages/mine/learn/collect/list?unit_id=' + this.pages_params.unit_id)
			}
		}
	}
};
</script>

<style>
page {
	background: #f6f6f6;
}

.kaoshi-bg {
	background-position: top;
	background-size: 100%;
	background-repeat: no-repeat;
	padding: 20px 15px 0;
}

.endtime {
	font-size: 14px;
	color: #aaa;
}

/*练习报告*/
.kaoshi-question-over {
	background-color: #fff;
	padding: 15px 20px 25px;
	border-radius: 8px;
}

.kaoshi-question-over-content {
	display: flex;
	width: 100%;
	margin: 0 auto;
	justify-content: space-between;
	align-items: center;
	font-size: 14px;
	color: #9a9a9a;
}

.kaoshi-question-over-content-flex {
	flex: 1;
	text-align: center;
}

.kaoshi-question-over-content-text {
	color: #000;
	font-size: 20px;
	padding-top: 4px;
}

.kaoshi-baogao {
	margin: 25px auto 30px;
	text-align: center;
	color: #000;
	display: flex;
	align-items: center;
	flex-direction: column;
}

.kaoshi-baogao-title {
	display: flex;
	justify-content: center;
	align-items: baseline;
	font-size: 12px;
}

.kaoshi-baogao-title-l {
	font-size: 24px;
}

.kaoshi-baogao-text {
	margin-top: 5px;
	font-size: 12px;
	color: #aaa;
	letter-spacing: .5px;
}

.flexline {
	height: 25px;
	border-right: 1px solid #f3f3f3;
}
</style>
